<template>
  <div class="container">
    <h2>Vue3 ShallowReactive & ShallowRef 示例</h2>

    <!-- ShallowReactive 示例 -->
    <section class="example-section">
      <h3>ShallowReactive 示例</h3>
      <p>ShallowReactive 只对对象的顶层属性进行响应式处理，深层嵌套对象不会被响应式化。</p>
      
      <div class="state-display">
        <h4>ShallowReactive 状态:</h4>
        <pre>{{ JSON.stringify(shallowReactiveState, null, 2) }}</pre>
        
        <div class="controls">
          <button @click="updateShallowReactiveTop">更新顶层属性 (name)</button>
          <button @click="updateShallowReactiveNested">更新嵌套属性 (info.age)</button>
          <button @click="addShallowReactiveProperty">添加顶层属性</button>
        </div>
      </div>
    </section>

    <!-- ShallowRef 示例 -->
    <section class="example-section">
      <h3>ShallowRef 示例</h3>
      <p>ShallowRef 只对 ref 的 value 本身进行响应式处理，如果 value 是对象，其内部属性不会被响应式化。</p>
      
      <div class="state-display">
        <h4>ShallowRef 状态:</h4>
        <pre>{{ JSON.stringify(shallowRefState, null, 2) }}</pre>
        
        <div class="controls">
          <button @click="updateShallowRefValue">更新整个 ref 值</button>
          <button @click="updateShallowRefNested">更新嵌套对象属性</button>
          <button @click="replaceShallowRefObject">替换整个对象</button>
        </div>
      </div>
    </section>

    <!-- 对比 Reactive 示例 -->
    <section class="example-section">
      <h3>普通 Reactive 对比</h3>
      <p>普通 reactive 会对所有层级的嵌套对象进行深度响应式处理。</p>
      
      <div class="state-display">
        <h4>普通 Reactive 状态:</h4>
        <pre>{{ JSON.stringify(normalReactiveState, null, 2) }}</pre>
        
        <div class="controls">
          <button @click="updateNormalReactiveNested">更新嵌套属性 (info.age)</button>
        </div>
      </div>
    </section>

    <!-- 说明 -->
    <section class="info-section">
      <h3>关键区别说明</h3>
      <ul>
        <li><strong>ShallowReactive</strong>: 只有对象的第一层属性是响应式的，深层嵌套对象不会被转换为响应式</li>
        <li><strong>ShallowRef</strong>: 只有 ref 的 value 属性本身是响应式的，如果 value 是对象，其内部属性不会被转换为响应式</li>
        <li><strong>普通 Reactive</strong>: 会递归地将对象的所有嵌套层级都转换为响应式</li>
        <li><strong>性能考虑</strong>: Shallow 方法避免了深层转换，适用于不需要深层响应式或包含不可变数据的场景</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { shallowReactive, shallowRef, reactive } from 'vue'

// ShallowReactive 示例
const shallowReactiveState = shallowReactive({
  name: 'John',
  info: {
    age: 25,
    address: {
      city: 'Beijing',
      district: 'Haidian'
    }
  },
  hobbies: ['reading', 'coding']
})

const updateShallowReactiveTop = () => {
  shallowReactiveState.name = `Updated ${Date.now()}`
  console.log('Top-level update triggered reactivity')
}

const updateShallowReactiveNested = () => {
  // 这个更新不会触发响应式更新，因为 info 对象不是响应式的
  shallowReactiveState.info.age += 1
  console.log('Nested update - may not trigger reactivity')
}

const addShallowReactiveProperty = () => {
  shallowReactiveState.newProperty = `New ${Date.now()}`
  console.log('Added new property')
}

// ShallowRef 示例
const shallowRefState = shallowRef({
  name: 'Jane',
  details: {
    email: 'jane@example.com',
    preferences: {
      theme: 'dark',
      language: 'en'
    }
  }
})

const updateShallowRefValue = () => {
  shallowRefState.value = {
    name: `Updated ${Date.now()}`,
    details: {
      email: 'updated@example.com',
      preferences: {
        theme: 'light',
        language: 'zh'
      }
    }
  }
  console.log('Full ref value update triggered reactivity')
}

const updateShallowRefNested = () => {
  // 这个更新不会触发响应式更新，因为 details 对象不是响应式的
  shallowRefState.value.details.email = `new-${Date.now()}@example.com`
  console.log('Nested object update - may not trigger reactivity')
}

const replaceShallowRefObject = () => {
  shallowRefState.value = {
    name: 'Replaced User',
    details: {
      email: 'replaced@example.com',
      preferences: {
        theme: 'auto',
        language: 'es'
      }
    }
  }
  console.log('Replaced entire object')
}

// 普通 Reactive 对比
const normalReactiveState = reactive({
  name: 'Normal',
  info: {
    age: 30,
    address: {
      city: 'Shanghai',
      district: 'Pudong'
    }
  }
})

const updateNormalReactiveNested = () => {
  // 这个更新会触发响应式更新，因为所有层级都是响应式的
  normalReactiveState.info.age += 1
  console.log('Normal reactive nested update - triggers reactivity')
}
</script>

<style scoped>
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.example-section {
  background: #f9f9f9;
  margin: 20px 0;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

h3 {
  color: #1890ff;
  margin-bottom: 15px;
}

h4 {
  color: #555;
  margin-bottom: 10px;
}

.state-display {
  margin: 20px 0;
}

pre {
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}

.controls {
  margin-top: 15px;
}

button {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #40a9ff;
}

.info-section {
  background: #f0f9ff;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
}

.info-section ul {
  padding-left: 20px;
}

.info-section li {
  margin: 10px 0;
  line-height: 1.6;
}

strong {
  color: #1890ff;
}
</style>



